<template>
    <div style="width: 100%; height: 100%">
        <div id="box" name="XMList" style="">
            <!-- 头部按钮区域 -->
            <div class="head">
                <el-input v-model="queryInfo.query" placeholder="请输入项目名称" class="input_search"></el-input>
                <el-button type="primary" @click="search" class="bthSearch">搜索</el-button>
                <el-button @click="showdialogVisible1" class="bthNormal">外业分发任务</el-button>
                <!-- <el-button @click="showdialogVisible" class="bthNormal">批量操作</el-button> -->
                <el-button @click="download" class="bthNormal">数据下载</el-button>
                <el-button @click="getPatrolData" class="bthNormal">刷新</el-button>
            </div>

            <!-- 表格 -->
            <el-table
                :data="patrolData"
                @selection-change="handleSelectionChange"
                :row-style="{ height: '30px' }"
                :header-cell-style="{ background: '#005ab5', color: 'black' }"
                style="font-size: 15px; font-family: microsoft yahei; color: black"
                border
            >
                <el-table-column type="selection" width="50" align="center" header-align="center"></el-table-column>
                <el-table-column label="序号" type="index" width="80"></el-table-column>
                <el-table-column prop="proNumber" label="立项文号"></el-table-column>
                <el-table-column prop="proName" label="项目名称"></el-table-column>
                <el-table-column prop="plot" label="涉及地块"></el-table-column>
                <el-table-column prop="plot" label="已外业"></el-table-column>
                <el-table-column prop="proTypes" label="项目阶段">
                    <template slot-scope="scope">
                        ​ {{ scope.row.proTypes == 1 ? '立项' : scope.row.proTypes == 2 ? '施工' : scope.row.proTypes == 3 ? '验收' : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="acceptingData" label="验收日期"></el-table-column>
                <el-table-column prop="opt" label="操作">
                    <!-- 详情按钮 -->
                    <template slot-scope="scope">
                        <el-button type="success" @click="toditel(scope.row.proId)">详情</el-button>
                        <!-- <el-button type="success" @click="showdialogVisible1(scope.row.proId)">分发APP外业</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                style="padding: 30px 0; text-align: center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[50, 100, 200, 400]"
                :page-size="queryInfo.pagesize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                background
            >
            </el-pagination>

            <!-- 外业分发任务对话框 -->
            <el-dialog :visible.sync="dialogVisible" width="45%" id="wyff">
                <!-- title -->
                <div slot="title" style="text-align: center">
                    <span>分发APP外业</span>
                </div>

                <!-- 穿梭框 -->
                <span>任务要求: <el-input v-model="misson.input" placeholder="请输入内容" style="width: 100%"></el-input></span>
                <br />
                <br />
                <el-transfer
                    v-model="transferValue"
                    :data="transferData"
                    :props="{ key: 'id', label: 'userName' }"
                    filterable
                    :titles="['全部人员', '分发人员']"
                    :button-texts="['移除', '选取']"
                />
                <el-button type="primary" class="distributeBtn" @click="distribute">确认分发</el-button>
            </el-dialog>
            <!-- 批量操作对话框 -->
            <el-dialog :visible.sync="dialogVisible1" width="50%" id="batchs">
                <!-- title -->
                <div slot="title" class="batchTitle">
                    <h3>批量处理</h3>
                </div>
                <!-- content -->
                <div class="content">
                    <!-- 审核结论 -->
                    <div class="verdict">
                        <h4>审核结论</h4>
                        <!-- 单选按钮 -->
                        <el-radio v-model="audit" label="1">批量提交</el-radio>
                        <el-radio v-model="audit" label="2">批量撤回</el-radio>
                    </div>

                    <!-- 提示选择的项目数量 -->
                    <div class="hint">共选择了1个项目，可批量提交1个</div>

                    <!-- 表格 -->
                    <el-table
                        :data="batchData"
                        :row-style="{ height: '30px' }"
                        :header-cell-style="{ background: '#DFE8F8', color: '#515255' }"
                        style="font-size: 15px; font-family: microsoft yahei"
                    >
                        <el-table-column label="序号" type="index" width="80"></el-table-column>
                        <el-table-column prop="date" label="项目名称"></el-table-column>
                        <el-table-column prop="date" label="项目拆旧区复垦区面积"></el-table-column>
                        <el-table-column prop="date" label="项目审核阶段"></el-table-column>
                    </el-table>

                    <!-- 审核说明 -->
                    <div class="explain">
                        <h4>审核说明</h4>
                        <el-form label-position="top" :model="batchRuleForm" :rules="batchRules" ref="batchRef" label-width="80px">
                            <el-form-item prop="explain">
                                <el-input type="textarea" v-model="batchRuleForm.explain"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="batchOperation">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="D_2" name="moveMAP" style="display: none; width: 99%; height: 100%; float: right">
            <div style="width: 99%; height: 5%; float: right">
                <div style="padding: 4px 0px">
                    <el-button type="primary" icon="el-icon-arrow-left" @click="back()">返回</el-button> &nbsp; <span>项目名称：</span>
                    <span>{{ this.title }}</span>
                </div>
            </div>

            <div style="width: 95%; height: 95%">
                <!-- 在线地图 -->
                <div style="width: 47%; height: 95%; float: left">
                    <el-tabs v-model="activeName1" type="card" style="height: 100%; width: 100%">
                        <el-tab-pane label="在线地图" name="first">
                            <div style="">
                                <div id="container" style="height: 100%; width: 100%; position: absolute"></div>
                                <div
                                    class="input-card"
                                    style="
                                        height: 10%;
                                        position: relative;
                                        cursor: pointer;
                                        z-index: 2;
                                        float: left;
                                        padding: 85% 0px 0px 1%;
                                    "
                                >
                                    <div class="input-item" id="pantoBtn" style="width: 100%; height: 100%; font-size: 50px">
                                        <i class="el-icon-aim"></i>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="width: 47%; height: 95%; float: right">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="项目信息" name="first"
                            ><div style="width: 100%; height: 100%; float: left" id="infor"></div
                        ></el-tab-pane>
                        <el-tab-pane label="项目地块" name="second">
                            <div>
                                <el-input placeholder="输入地块编号关键字搜索" v-model="mapText" @blur="searchland()" style="">
                                    <el-button slot="append" icon="el-icon-search" @click="searchland()"></el-button>
                                </el-input>
                            </div>
                            <el-table :data="tabledata" style="width: 100%">
                                <el-table-column prop="address" label="地块编号"> </el-table-column>
                                <el-table-column prop="estimateArea" label="预估面积（亩）"> </el-table-column>
                                <el-table-column prop="area" label="地块面积"> </el-table-column>
                            </el-table>
                            <el-pagination
                                :current-page="queryInfo.pagenum"
                                :page-size="queryInfo.pagesize"
                                :total="landtotal"
                                style="padding: 30px 0; text-align: center"
                                background
                                layout="total, prev, pager, next, jumper"
                                @current-change="getLand"
                            />
                        </el-tab-pane>
                        <!-- 现场照片 -->
                        <el-tab-pane label="现场照片" name="third">
                            <div id="banner" style="width: 100%; height: 100%">
                                <el-carousel
                                    :interval="0"
                                    :height="bannerHeight + 'px'"
                                    style="width: 100%; height: 100%"
                                    @change="handlechange"
                                >
                                    <el-carousel-item v-for="item in img_list" :key="item.id" :value="item.id">
                                        <img :src="item.fileUrl" :id="item.id" name="zmd" />
                                    </el-carousel-item>
                                </el-carousel>
                                <div style="width: 100%">
                                    <table style="width: 100%">
                                        <tr>
                                            <td style="width: 9%">拍摄人员</td>
                                            <td><el-input v-model="picdata.userName" :disabled="true"></el-input></td>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            <td style="width: 9%">拍摄时间</td>
                                            <td><el-input v-model="picdata.createTime" :disabled="true"></el-input></td>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            <td style="width: 9%">拍摄位置</td>
                                            <td><el-input v-model="picdata.coordinate" :disabled="true"></el-input></td>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            <td style="width: 9%">拍摄角度</td>
                                            <td><el-input v-model="picdata.bearing" :disabled="true"></el-input></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </el-tab-pane>
                        <!-- 现场视频 -->
                        <el-tab-pane label="现场视频" name="fourth"
                            ><div style="width: 100%; height: 100%; float: left">
                                <div class="show-imgs-container" @mouseover="isIn = true" @mouseout="isIn = false">
                                    <el-carousel
                                        :interval="0"
                                        arrow="always"
                                        :autoplay="autoplay"
                                        trigger="click"
                                        :indicator-position="autoplay ? '' : 'none'"
                                        @change="getIndex()"
                                    >
                                        <el-carousel-item v-for="(item, index) in videos" :key="index">
                                            <!--视频播放器 -->
                                            <video :ref="'videoPlayer' + index" :controls="isIn">
                                                <source :src="item.fileUrl" type="video/mp4" name="video" :id="item.id" />
                                                您的浏览器不支持Video标签。
                                            </video>
                                            <i v-show="!isPlay" class="play-btn el-icon-video-play" @click="playVideo"></i>
                                            <i v-show="isPlay && isIn" class="play-btn el-icon-video-pause" @click="pauseVideo"></i>
                                        </el-carousel-item>
                                    </el-carousel>
                                    <div style="width: 100%">
                                        <table style="width: 100%">
                                            <tr>
                                                <td style="width: 9%">拍摄人员</td>
                                                <td><el-input v-model="videodata.userName" :disabled="true"></el-input></td>
                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                                <td style="width: 9%">拍摄时间</td>
                                                <td><el-input v-model="videodata.createTime" :disabled="true"></el-input></td>
                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                                <td style="width: 9%">拍摄位置</td>
                                                <td><el-input v-model="videodata.coordinate" :disabled="true"></el-input></td>
                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                                <td style="width: 9%">拍摄角度</td>
                                                <td><el-input v-model="videodata.bearing" :disabled="true"></el-input></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="巡查举证" name="fifth">
                            <div>
                                <span
                                    >项目地块:<br /><el-select
                                        v-model="ruleForm.address"
                                        placeholder="请选择地块"
                                        style="width: 100%"
                                        @change="handleChange"
                                    >
                                        <!-- 下拉选择框 -->
                                        <el-option v-for="item in options" :key="item.address" :label="item.address" :value="item.address">
                                        </el-option></el-select
                                ></span>
                                <br /><br />
                                <span>地块面积: <el-input v-model="ruleForm.area" placeholder="地块面积" :disabled="true"></el-input></span>
                                <br />
                                <el-divider></el-divider>
                                <span
                                    >巡查实况记录: &nbsp;&nbsp;&nbsp; <br /><br />
                                    <el-input
                                        v-model="ruleForm.content"
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请根据巡查情况记录工作"
                                        :disabled="true"
                                    ></el-input
                                ></span>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AMap from 'AMap';
import pro from '@/api/movecheck/movecheck';
import lx_info from '@/api/lx_infor/lx_infor';
export default {
    created() {
        this.getPatrolData();
    },
    data() {
        return {
            // 项目地块下拉表
            options: [],
            ruleForm: {
                area: '',
                content: ''
            },
            misson: {
                input: ''
            },
            form: [],
            tableid: '',
            // 地块查询模糊查询地段
            mapText: '',
            // 现场视屏
            tabledata: [],
            autoplay: true, //是否自动切换
            isPlay: false, //播放状态
            isIn: false, //鼠标是否位于播放器内
            cutTime: '', //轮播时间，单位毫秒
            nowIndex: 0,
            videos: [],
            // 现场照片
            picdata: {
                userName: '',
                coordinate: [],
                bearing: '',
                createTime: ''
            },
            videodata: {
                userName: '',
                coordinate: [],
                bearing: '',
                createTime: ''
            },
            img_list: [],
            // 图片父容器高度
            bannerHeight: 1000,
            // 浏览器宽度
            screenWidth: 0,
            // 移动地图数据
            maplist: [],
            text: '',
            positions: [],
            mj: [],
            // 表格数据
            patrolData: [],
            //标题
            title: '',
            activeName: 'first',
            activeName1: 'first',
            // 查询表格所需的参数
            queryInfo: {
                // 搜索的内容
                query: '',
                // 当前页码
                pagenum: 1,
                // 每页显示的条数
                pagesize: 10
            },
            landtotal: 0,
            // 总数
            total: 0,
            // 用户选择的项目id数组
            batchList: [],
            // 对话框
            dialogVisible: false,
            dialogVisible1: false,
            // 穿梭框数据
            transferData: [],
            // 穿梭框所选的数据
            transferValue: [],
            // 审核结论
            audit: '1',
            // 批量处理的表格数据
            batchData: [],
            // 批量操作的表单
            batchRuleForm: {},
            // 批量操作表单的验证规则
            batchRules: {
                explain: [{ required: true, message: '请填写审核说明', trigger: 'blur' }]
            },
            mappath: [],
            missonId: ''
        };
    },
    mounted() {
        // 首次加载时,需要调用一次
        this.screenWidth = window.innerWidth;
        this.setSize();
        // 窗口大小发生改变时,调用一次
        window.onresize = () => {
            this.screenWidth = window.innerWidth;
            this.setSize();
        };
        this.listenVideo();
    },
    methods: {
        handleChange(val) {
            var obj = {};
            obj = this.options.find(function (item) {
                return item.address === val;
            });
            this.ruleForm.area = obj.area;
            this.ruleForm.content = obj.content;
        },
        // 时间转换
        formatDate: function (value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? '0' + MM : MM;
            let d = date.getDate();
            d = d < 10 ? '0' + d : d;
            let h = date.getHours();
            h = h < 10 ? '0' + h : h;
            let m = date.getMinutes();
            m = m < 10 ? '0' + m : m;
            let s = date.getSeconds();
            s = s < 10 ? '0' + s : s;
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        },
        // 地块的模糊查询
        async searchland() {
            const { data: res } = await this.$http.post(
                `/mobile/mobile/getAddressWord/${this.queryInfo.pagenum}/${this.queryInfo.pagesize}/` + this.tableid + '/' + this.mapText
            );
            if (res.code != 20000) return this.$message.error('获取列表失败！');

            this.tabledata = res.data.rows;

            this.landtotal = res.data.total;
        },
        // 获取所有地块
        async getLand(id) {
            const { data: res } = await this.$http.post(
                `/mobile/mobile/getAddress/${this.queryInfo.pagenum}/${this.queryInfo.pagesize}/` + id
            );
            if (res.code != 20000) return this.$message.error('获取列表失败！');

            this.tabledata = res.data.rows;

            this.landtotal = res.data.total;
        },
        // 现场视频
        //获取走马灯的索引
        async getIndex(nowIndex, oldIndex) {
            //用户可能在上个视频未播放完毕就切换
            //此时需要暂停上个视频并把时间归零，否则影响对当前视频的监听逻辑
            let myVideo = this.$refs['videoPlayer' + oldIndex];
            myVideo[0].pause();
            myVideo[0].currentTime = 0;
            this.nowIndex = nowIndex;
            this.listenVideo();
            var a = $('[name=video]');
            var id = $(a[nowIndex]).attr('id');
            const { data: res } = await this.$http.post(`/mobile/mobile/getInfo/${id}`);
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            var tojson = JSON.parse(res.data);
            this.positions = tojson.dto.coordinate.split(',');
            this.videodata.userName = tojson.userName;
            (this.videodata.coordinate = 'x:' + tojson.dto.coordinate.split(',')[0] + '，y:' + tojson.dto.coordinate.split(',')[1]),
                (this.videodata.bearing = tojson.dto.bearing);
            this.videodata.createTime = this.formatDate(tojson.dto.createTime.time);
            this.getmap(this.mappath);
        },
        // 获取所有视频
        async getvideo(id) {
            const { data: res } = await this.$http.post(`/mobile/mobile/video/${id}/` + null);
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.videos = res.data;
        },
        // 获取巡查记录
        async getlook(id) {
            const { data: res } = await this.$http.post(`/mobile/mobile/lookContent/${id}`);
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.options = res.data;
        },
        //监听视频的播放、暂停、播放完毕等事件
        listenVideo() {
            //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
            let myVideo = this.$refs['videoPlayer' + this.nowIndex];
            //监听播放
            myVideo[0].addEventListener('play', () => {
                this.autoplay = false;
                this.isPlay = true;
            });
            //监听暂停
            myVideo[0].addEventListener('pause', () => {
                this.autoplay = true;
                this.isPlay = false;
            });
            //监听播放完毕
            myVideo[0].addEventListener('ended', () => {
                //时间归零
                myVideo[0].currentTime = 0;
                this.autoplay = true;
                this.isPlay = false;
            });
        },
        //播放视频
        playVideo() {
            //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
            let myVideo = this.$refs['videoPlayer' + this.nowIndex];

            myVideo[0].play();
        },
        //暂停视频
        pauseVideo() {
            //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
            let myVideo = this.$refs['videoPlayer' + this.nowIndex];
            myVideo[0].pause();
        },
        // 现场照片
        setSize: function () {
            // 通过浏览器宽度(图片宽度)计算高度
            this.bannerHeight = (400 / 1920) * this.screenWidth;
        },
        // 照片传递数据
        async handlechange(val) {
            var a = $('[name=zmd]');
            var id = $(a[val]).attr('id');
            const { data: res } = await this.$http.post(`/mobile/mobile/getInfo/${id}`);
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            var tojson = JSON.parse(res.data);
            this.positions = tojson.dto.coordinate.split(',');
            this.picdata.userName = tojson.userName;
            (this.picdata.coordinate = 'x:' + tojson.dto.coordinate.split(',')[0] + '，y:' + tojson.dto.coordinate.split(',')[1]),
                (this.picdata.bearing = tojson.dto.bearing);
            this.picdata.createTime = this.formatDate(tojson.dto.createTime.time);
            this.getmap(this.mappath);
        },
        // 获取所有照片
        async getpic(id) {
            const { data: res } = await this.$http.post(`/mobile/mobile/photo/${id}/` + null);
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.img_list = res.data;
        },
        // 地图传递数据
        getinfor(id) {
            pro.getare(id).then((rep) => {
                this.mappath = rep.data;
                this.getmap(this.mappath);
            });
        },
        // 获取地图
        getmap(p) {
            const map = new AMap.Map('container', {
                resizeEnable: true,
                zoom: 10,
                center: [116.397428, 39.90923]
            });
            // 图形界面
            var pos = this.positions;

            // 标点位置
            var polygon = new AMap.Polygon({
                map: map,
                fillOpacity: 0.4,
                path: p
            });
            map.setFitView();
            var marker = new AMap.Marker({
                position: new AMap.LngLat(pos[0], pos[1])
            });
            map.panTo(pos);
            map.add(marker);
            AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function () {
                map.panTo(pos);
            });
        },
        // 获取表格数据
        async getPatrolData() {
            const { data: res } = await this.$http.post(`/mobile/mobile/view/${this.queryInfo.pagenum}/${this.queryInfo.pagesize}`);
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.patrolData = res.data.rows;
            this.total = res.data.total;
        },
        // 模糊查询
        async search() {
            const { data: res } = await this.$http.post(
                `/mobile/mobile/word/${this.queryInfo.query}/${this.queryInfo.pagenum}/${this.queryInfo.pagesize}`
            );
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.patrolData = res.data.rows;
            this.total = res.data.total;
        },
        // 获取外业分发对话框的数据
        async getDistributeData(id) {
            const { data: res } = await this.$http.post('/mobile/mobile/getField');
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.missonId = id;
            pro.getpeople(id).then((rep) => {
                for (var a = 0; a < rep.data.length; a++) {
                    this.transferValue.push(rep.data[a].id);
                }
            });
            this.transferData = res.data;
        },
        // 获取批量操作表格数据
        async getBatchData() {
            const { data: res } = await this.$http.post('url');
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.warningData = res.data.goods;
            this.total = res.data.total;
        },

        // 监听每页显示多少条数据
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize;
            this.getPatrolData();
        },
        // 监听当前页码改变的事件
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage;
            this.getPatrolData();
        },
        // 监听表格选择
        handleSelectionChange(val) {
            this.batchList = val;
        },
        // 重置表单
        reset() {
            this.$refs.batchRef.resetFields();
        },
        // 显示外业分发对话框
        showdialogVisible1() {
            if (this.batchList.length == 0) return this.$message.error('请选择要操作的项目');
            // 获取外业分发数据
            this.getDistributeData();
            this.transferData = [];
            this.transferValue = [];
            this.dialogVisible = true;
        },
        // 外业分发
        distribute() {
            if (this.misson.input === '') return this.$message.error('请输入任务内容');
            if (this.transferValue.length === 0) return this.$message.error('请选择分发的人员');
            for (var a = 0; a < this.batchList.length; a++) {
                let form = new FormData();
                form.append('proId', this.batchList[a].proId);
                form.append('userId', this.transferValue);
                form.append('task', this.misson.input);
                pro.mission(form);
            }
            this.batchList = [];
            this.transferValue = [];
            this.misson.input = '';
            this.dialogVisible = false;
            this.$message.success('分发成功');
        },
        // 显示批量操作对话框
        showdialogVisible() {
            // 判断有无选择项目
            if (this.batchList.length == 0) return this.$message.error('请选择要操作的项目');
            // 获取数据
            this.getBatchData();

            this.dialogVisible1 = true;
        },
        // 批量操作
        batchOperation() {
            this.dialogVisible1 = false;
        },
        // 数据下载
        download() {
            // 判断有无选择项目
            if (this.batchList.length == 0) return this.$message.error('请选择要下载的项目');
        },
        // 跳转至详情界面
        toditel(id) {
            this.getLand(id);
            this.getinfor(id);
            this.tableid = id;
            $("[name='XMList']").hide();
            $("[name='moveMAP']").show();
            lx_info.openInfo(id).then((rep) => {
                this.title = rep.data.dto.proName;
            });
            dialogFrameSrc(id);
            this.getpic(id);
            this.getvideo(id);
            this.getlook(id);
        },
        back() {
            $("[name='moveMAP']").hide();
            $("[name='XMList']").show();
        }
    }
};

function dialogFrameSrc(id) {
    $('#iddivframe').html(
        '<iframe id="idframe"  frameborder="0" width="100%" height="800px" src="/?r=' +
            Math.random() +
            '/#/movemap"  data-id="' +
            id +
            '"  ></iframe>'
    );
    $('#infor').html(
        '<iframe id="idframe"  frameborder="0" width="100%" height="800px" src="/?r=' +
            Math.random() +
            '/#/pro_infor"  data-id="' +
            id +
            '"  ></iframe>'
    );
    $('#sh').html(
        '<iframe id="idframe"  frameborder="0" width="100%" height="800px" src="/?r=' +
            Math.random() +
            '/#/project_examine"  data-id="' +
            id +
            '"  ></iframe>'
    );
}
</script>
<style lang="less">
.show-imgs-container {
    height: 90%;

    .el-carousel {
        width: 100%;
        height: 100%;
    }

    .el-carousel__container {
        width: 100%;
        height: 100%;
    }

    .el-carousel__item {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        video {
            width: 100%;
            height: 100%;
            position: fixed;
            display: inline-block;
            vertical-align: baseline;
            object-fit: fill; //消除留白
        }
        .play-btn {
            font-size: 60px;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            &:hover {
                cursor: pointer;
            }
        }
    }
}
.el-carousel__container {
    height: 700px !important;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
img {
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
    height: inherit;
}
#box {
    width: 99%;
    overflow: hidden;
    background: #ffffff;
    display: block;
    margin-left: 1%;
    padding: 15px;
    box-sizing: border-box;
}
/* 搜索框以及按钮样式 */
.head {
    margin-bottom: 8px;
}
.head .input_search {
    width: 150px;
    margin-right: 10px;
}
.bthSearch {
    background-color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthNormal {
    border-color: #848484;
    font-size: 15px;
    font-family: 微软雅黑;
}

/* 外业分发任务对话框样式 */
/deep/ #wyff .el-transfer__buttons button {
    display: block;
    margin: 0;
    margin: 10px 0;
}
/deep/ #wyff .el-transfer__buttons span {
    margin-left: 0;
}
/deep/ #wyff .el-transfer-panel {
    width: 340px;
}
/deep/ #wyff .el-dialog__body {
    padding: 10px 20px;
    /* text-align: center; */
}
/deep/ #wyff .el-dialog {
    height: 420px;
}
.el-transfer-panel {
    width: 295px;
}
.distributeBtn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* 批量操作对话框样式 */
/deep/ #batchs .el-dialog__header {
    padding: 0;
}
/deep/ #batchs .el-dialog__headerbtn {
    top: 10px;
    right: 10px;
}
/deep/ #batchs .el-dialog__body {
    /* padding: 0; */
    padding-top: 15px;
}
.batchTitle {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    font-size: 14px;
    font-family: 微软雅黑;
    background-color: #f5f5f5;
}
#batchs .content h4 {
    margin-bottom: 15px;
    color: #616266;
}
#batchs .content .hint {
    margin: 10px 0;
    font-weight: 500;
    color: #616266;
}
#batchs .content .explain {
    margin-top: 15px;
}
#container {
    height: 100%;
    width: 100%;
}
</style>
